<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    import Map from 'ol/Map';
    import View from 'ol/View';
    import {Circle, Fill, Stroke, Style} from 'ol/style';
    import {Vector as VectorSource} from 'ol/source';
    import {Vector as VectorLayer} from 'ol/layer';
    import TopoJSON from 'ol/format/TopoJSON';
    export default {
        name: "TopojsonLayer",
        mounted(){

            /**
             *矢量几何要素的样式
             */
            var image = new Circle({
                radius: 5,
                fill: null,
                stroke: new Stroke({ color: 'red', width: 1 })
            });
            var styles = {
                'Point': [
                    new Style({
                        //点样式
                        image: image
                    })
                ],
                'LineString': [
                    new Style({
                        stroke: new Stroke({
                            //线的边界样式
                            color: 'green',
                            width: 1
                        })
                    })
                ],
                'MultiLineString': [
                    new Style({
                        stroke: new Stroke({
                            //多线的边界样式
                            color: 'green',
                            width: 1
                        })
                    })
                ],
                'MultiPoint': [
                    new Style({
                        //多点的点样式
                        image: image
                    })
                ],
                'MultiPolygon': [
                    new Style({
                        stroke: new Stroke({
                            //多区的边界样式
                            color: 'yellow',
                            width: 1
                        }),
                        fill: new Fill({
                            //多区的填充样式
                            color: 'rgba(255, 255, 0, 0.1)'
                        })
                    })
                ],
                'Polygon': [
                    new Style({
                        stroke: new Stroke({
                            //区的边界样式
                            color: 'blue',
                            lineDash: [4],
                            width: 3
                        }),
                        fill: new Fill({
                            //区的填充样式
                            color: 'rgba(0, 0, 255, 0.1)'
                        })
                    })
                ],
                'GeometryCollection': [
                    new Style({
                        stroke: new Stroke({
                            //集合要素的边界样式
                            color: 'magenta',
                            width: 2
                        }),
                        fill: new Fill({
                            //集合要素的填充样式
                            color: 'magenta'
                        }),
                        image: new Circle({
                            //集合要素的点样式
                            radius: 10,
                            fill: null,
                            stroke: new Stroke({
                                color: 'magenta'
                            })
                        })
                    })
                ],
                'Circle': [
                    new Style({
                        stroke: new Stroke({
                            //圆的边界样式
                            color: 'red',
                            width: 2
                        }),
                        fill: new Fill({
                            //圆的填充样式
                            color: 'rgba(255,0,0,0.2)'
                        })
                    })
                ]
            };
            var styleFunction = function (feature) {
                //根据要素类型设置几何要素的样式
                return styles[feature.getGeometry().getType()];
            };


            this.map = new Map({
                layers: [
                    //topojson是矢量数据因此需要使用矢量图层渲染，也必须使用矢量数据源加载数据
                    new VectorLayer({
                        source: new VectorSource({
                            url: 'http://localhost:8888/openlayer/topojson/world-110m.json',
                            //指定加载的数据格式是topojson
                            format: new TopoJSON({
                                layers: ['countries'],
                            }),
                            overlaps: false,
                        }),
                        style: styleFunction,
                    })
                ],
                target: 'map',
                view: new View({
                    center: [0, 0],
                    projection: "EPSG:4326", //指定投影
                    zoom: 5,
                }),
            });
        }
    }
</script>

<style scoped>

</style>